<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" href="<?php echo $this->css ?>" type="text/css">
    <script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
    <script src="/js/libs/handlebars.min.js"></script>
</head>

<body>
    <div id="wpBody" class="schedule tab_content current">
        <script id="wpWidget" type="text/x-handlebars-template">
            <ul class="tabs">
            {{#each this}}
            <li>
                {{dayOfWeek}}<span>{{dayOfMonth}}</span>
            </li>
            {{/each}}
        </ul>

        <div class="schedule_content">
            {{#each this}}
            <div id="day-{{dayOfMonth}}" class="schedule_item">
                {{#if (noShowsCheck this.shows)}}
                <div class="row empty-schedule"><?php echo _('Looks like there are no shows scheduled on this day.') ?></div>
                {{else}}
                {{#each shows}}
                <div class="row">
                    <div class="time_grid">{{show_start_hour}} - {{show_end_hour}}</div>
                    <div class="name_grid">{{{name}}}</div>
                </div>
                {{/each}}
                {{/if}}
            </div>
            {{/each}}
        </div>

        <div class="weekly-schedule-widget-footer" <?php if ($this->widgetStyle == "premium") echo "style='display:none'"; ?>>
            <a href="<?php echo PRODUCT_SITE_URL; ?>" target="_blank"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
        </div>
    </script>
    </div>

    <script type="text/javascript">
        let importSchedule = <?php echo $this->schedule_data; ?>; // Object prepared in JSON, w/o API call
        let cleanSchedule = [];

        // Insert shows into correct locations in importShows array (work-around for API v.1)
        let importShows = importSchedule["shows"];
        importShows.forEach(element => {
            // Convert timestamps to JS (sec -> millisec)
            var start_date = new Date(element.starts_timestamp * 1000);
            var end_date = new Date(element.ends_timestamp * 1000);
            // Check date of show so we know where to assign it to
            var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth() + 1) + "-" + start_date.getDate();
            // Assign show to correct location
            if (importSchedule["weekDays"][format_start_date] !== undefined) {
                importSchedule["weekDays"][format_start_date]["shows"].push({
                    "show_start_hour": start_date.toLocaleTimeString([], {
                        hour: 'numeric',
                        minute: 'numeric'
                    }),
                    "show_end_hour": end_date.toLocaleTimeString([], {
                        hour: 'numeric',
                        minute: 'numeric'
                    }),
                    "name": element.name
                });
            }
        });

        // Re-arraying data into a Handlebars-friendly format
        for (var i = 0; i <= 6; i++) {
            cleanSchedule.push(Object.values(importSchedule.weekDays)[i]);
        }

        // Checker
        Handlebars.registerHelper('noShowsCheck', function(obj) {
            return obj.length == 0;
        });

        // Templating with Handlebars.js
        var wpWidget = document.querySelector('#wpWidget').innerHTML;
        var wpTemplate = Handlebars.compile(wpWidget);
        var compiledHTML = wpTemplate(cleanSchedule);
        document.querySelector('#wpBody').innerHTML = compiledHTML;

        // Tabs logic
        $(document).ready(function() {
            //initialize first day to active
            $('.tabs').find("li").first().addClass("active");
            $('.schedule_content').find('.schedule_item').first().addClass("active");

            $('.tabs li').click(function() {
                //var tab_id = $(this).attr('data-tab');
                var tab_id = "day-" + $(this).find('span').text();

                $('.tabs li').removeClass('active');
                $('.schedule_item').removeClass('active');

                $(this).addClass('active');
                $("#" + tab_id).addClass('active');
            });
        });
    </script>
</body>

</html>
